// 做rem适配，使用 “浏览器宽度 / 80 + 'px'” 这个公式，得到html的font-size值
// 并且，当浏览器窗口改变大小的时候，重新计算这个值

// const { table } = require("console");

// 计算font - size值
function setFont() {
  // 获取浏览器的宽度
  let htmlWidth = document.querySelector('html').clientWidth;
  // 找到临界点，判断最大宽度和最小宽度
  if (htmlWidth < 1024) htmlWidth = 1024;
  if (htmlWidth > 1920) htmlWidth = 1920;
  // 计算fontSize
  let fontSize = htmlWidth / 80 + 'px';
  // 把fontSize值，设置给html元素即可
  document.querySelector('html').style.fontSize = fontSize;
}

setFont(); // 刷新页面，马上计算font-size值

window.onresize = function () {
  setFont(); // 当浏览器窗口改变大小的时候，还要重新计算font-size值
}

let names = []
let scores = []
let pays = []

// 先给按钮一个点击事件
$('.left button').on('click', function () {
  let uname = $('.uname').val()
  let score = $('.score').val()
  let pay = $('.pay').val()
  $('table ').append(` 
  <tr>
  <td>${$('.uname').val()}</td>
  <td>${$('.score').val()}</td>
  <td>${$('.pay').val()}</td>
</tr>
  `)
  $('.uname').val('')
  $('.score').val('')
  $('.pay').val('')
  names.push(uname)
  scores.push(score)
  pays.push(pay)
  line()
  bar()
  $('.right h3').css({ display: 'block' })
}
)

// ---------------右侧--------------
// 评分区域
// --------------折线图-----------
function line() {
  // 1找到元素,并初始化echarts
  let myChatr = echarts.init($('.right .score')[0])
  let uname = names
  let score = scores
  // 2 配置项
  let option = {
    backgroundColor: '#0e1c47',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'transparent',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(126,199,255,0)' // 0% 处的颜色
            }, {
              offset: 0.5,
              color: 'rgba(126,199,255,1)' // 100% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(126,199,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
      },
      formatter: (p) => {
        console.log(p)
        let dom = `<div style="width: 79px;
    height: 50px;;color:#fff;position: relative;">
          <svg style="position: absolute;top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="71" viewBox="0 0 84 55">
        <defs>
          <style>
            .cls-1 {
              fill: #07172c;
              fill-opacity: 0.8;
              stroke: #a7d8ff;
              stroke-linejoin: round;
              stroke-opacity: 0.2;
              stroke-width: 1px;
              fill-rule: evenodd;
            }
  
          </style>
        </defs>
        <path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
          transform="translate(-258.5 -592.5)" />
      </svg>
          <div style="padding: 4px 8px 4px 14px;display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: column;position: relative;z-index: 1;">
              <div style="margin-bottom: 4px;width:100%;display:flex;justify-content:space-between;align-items:center;">
                  <span style="font-size:14px;color:#7ec7ff;">${p[0].seriesName}</span>
                  <span style="font-size:14px;color:#fff;">${p[0].data}</span>
              </div>
              <div style="width:100%;display:flex;justify-content:space-between;align-items:center;">
                  <span style="font-size:14px;color:#7ec7ff;">${p[1].seriesName}</span>
                  <span style="font-size:14px;color:#fff;">${p[1].data}</span>
              </div>
          </div>
      </div>`
        return dom
      }
    },
    // 图例
    legend: {
      align: "left",
      right: '5%',
      top: '10%',
      type: 'plain',
      textStyle: {
        color: '#5ce0e2',
        fontSize: 16
      },
      // icon:'rect',
      itemGap: 25,
      itemWidth: 18,
      icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',

      data: [
        {
          name: '评分'
        },
      ]
    },
    grid: {
      top: '18%',
      left: '10%',
      right: '5%',
      bottom: '15%',
      // containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#233653'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#7ec7ff',
          padding: 16,
          fontSize: 14
        },
        formatter: function (data) {
          return data
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#192a44'
        },
      },
      axisTick: {
        show: false,
      },
      data: uname
    }],
    yAxis: [{
      name: '评分',
      nameTextStyle: {
        color: "#7ec7ff",
        fontSize: 16,
        padding: 10
      },
      min: 0,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#192a44'
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#233653"
        }

      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#7ec7ff',
          padding: 16
        },
        formatter: function (value) {
          if (value === 0) {
            return value
          }
          return value
        }
      },
      axisTick: {
        show: false,
      },
    }],
    series: [{
      name: '评分',
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 10,
      smooth: true,
      // lineStyle: {
      //   normal: {
      //     width: 5,
      //     color: "rgba(25,163,223,1)", // 线条颜色
      //   },

      //   borderColor: 'rgba(0,0,0,.4)',
      // },
      lineStyle: {
        width: 4,
        color: "#5ce0e2",
        shadowColor: '#5ce0e2',
        shadowBlur: 20,
      },
      itemStyle: {
        color: "#5ce0e2",
        borderColor: "#5ce0e2",
        borderWidth: 2

      },
      tooltip: {
        show: true
      },
      areaStyle: { //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: "rgba(25,163,223,.3)"
          },
          {
            offset: 1,
            color: "rgba(25,163,223, 0)"
          }
          ], false),
          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      },
      data: score
    }]
  };
  // 3创建图标
  myChatr.setOption(option)
}


// 薪资区域
// --------------------柱状图----------------
function bar() {
  // 1.找到元素,并初始化echarts
  let myChatr = echarts.init($('.right .pay')[0])

  // 2.配置项
  let option = {
    backgroundColor: '#0B1535',
    "textStyle": {
      "fontSize": 0,
    },
    "color": ["#00FCFF", "#FFDF1C", "#5AB72C", "#FF715A", "#2F9BFF"],
    "xAxis": {
      "nameTextStyle": {
        "color": "#c0c3cd",
        "padding": [0, 0, -10, 0],
        "fontSize": 14
      },
      "axisLabel": {
        "color": "#c0c3cd",//X轴文字
        "fontSize": 14,
        "interval": 0
      },
      "axisTick": {
        "lineStyle": {
          "color": "#0B1535",
          "width": 1
        },
        "show": false
      },
      "splitLine": {
        "show": false
      },
      "axisLine": {
        "lineStyle": {
          "color": "#384267",
          "width": 1,
          "type": "dashed"
        },
        "show": true
      },
      "data": names,
      "type": "category"
    },
    "yAxis": {
      "type": 'value',
      "name": "元",
      "nameTextStyle": {
        "color": "#fff",
        "padding": [0, 0, 13, 0],
        "fontSize": 16
      },
      "axisLabel": {
        "color": "#c0c3cd",//Y轴文字
        "fontSize": 14

      },
      "axisTick": {
        "lineStyle": {
          "color": "#384267",
          "width": 1
        },
        "show": true
      },
      "splitLine": {
        "show": true,
        "lineStyle": {
          "color": "#384267",
          "type": "line"
        }
      },
      "axisLine": {
        "lineStyle": {
          "color": "#fff",
          "width": 1,
          "type": "line"
        },
        "show": false
      },
    },
    "series": [{
      "data": pays,
      "type": "bar",
      "barMaxWidth": "auto",
      "barWidth": 30,
      "itemStyle": {
        "color": {
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false,
          "colorStops": [{
            "offset": 0,
            "color": "#00FCFF",
          }, {
            "offset": 1,
            "color": "#0B1A39"
          }]
        }
      },
      "label": {
        "show": true,
        "position": "top",
        "distance": 10,
        "color": "#fff",
        "position": [30, 10],
      }
    }
    ],
    "tooltip": {
      "trigger": "axis",
      "show": false
    }
  }

  // 3.创建图标
  myChatr.setOption(option)
}